<!--
 * @Author zhaoyuemi
 * @Date 2021/4/22
 * @LastEditTime 2021/4/22
 * @LastEditors 86157
 * @Description Modal 模态框
 * @FilePath
 * @ router
 * @version 1.0
-->

<template>
    <transition name="slide">
        <div class="modal" v-show="showModal">
            <div class="mask"></div>
            <div class="modal-dialog">
                <div class="modal-header">
                    <span>{{title}}</span>
                    <a href="javascript:;" class="icon-close" @click="$emit('cancle')"></a>
                </div>
                <div class="modal-body">
                    <slot name="body"></slot>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class="btn" v-if="btnType==1" @click="$emit('submit')">{{sureText}}</a>
                    <a href="javascript:;" class="btn" v-if="btnType==2" @click="$emit('cancle')">{{cancleText}}</a>
                    <div class="btn-group" v-if="btnType==3">
                        <a href="javascript:;" class="btn" @click="$emit('submit')">{{sureText}}</a>
                        <a href="javascript:;" class="btn btn-default" @click="$emit('cancle')">{{cancleText}}</a>
                    </div>

                </div>
            </div>
        </div>
    </transition>

</template>

<script>
    export default {
        name: "Modal",
        props:{
            //弹框类型 小small 中middle 大large 表单 form
            modalType:{
                type:String,
                default:'form'
            },
            //弹框标题
            title:String,
            //按钮 1确定按钮 2取消按钮 3确定取消
            btnType:String,
            //
            sureText:{
                type:String,
                default:'确定'
            },
            cancleText:{
                type:String,
                default:'取消'
            },
            showModal:Boolean
        },
        data (){
            return{

            }
        }
    }
</script>

<style lang="scss">
    @import './../assets/scss/config.scss';
    @import './../assets/scss/mixin.scss';
    @import "./../assets/scss/button.scss";
    @import "./../assets/scss/modal.scss";
</style>